<template>
  <div class="offlineCollection">
    <div v-if="$route.path=='/reimbursement/offlineCollection'">
      <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
        <div class="card_title">
          线下收款
        </div>
        <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 18px;">
          <a-radio-group v-model="status" style="margin-right: 5px;margin-bottom:5px;" @change="statusChange">
            <a-radio-button value="a">
              待收款
            </a-radio-button>
            <a-radio-button :value="5">
              已收款
            </a-radio-button>
            <a-radio-button :value="1">
              已核对
            </a-radio-button>
            <a-radio-button :value="2">
              重核对
            </a-radio-button>
          </a-radio-group>
          <a-input-search
            placeholder="标题关键词 / 商品ID / 店铺名"
            style="width: 224px;"
            v-model="search"
            allowClear
            @search="onSearch"
          />
        </div>
        <div>
          <a-table
            v-if="status === 'a'"
            :columns="columns"
            :rowKey="activity => activity.pd_id"
            :dataSource="activity"
            :loading="loading"
            @change="handleTableChange"
            :pagination="pagination"
          >
            <div slot="pd_addTime" slot-scope="text, row">
              <div style="width: 155px;margin: 0 auto;">
                <div>{{ row.pd_addTime }}</div>
                <div>联系QQ:{{ row.si_contactQq }}</div>
              </div>
            </div>
            <div slot="pd_subTitle" slot-scope="text, row">
              <div class="flex row_bet" style="width: 370px;margin: 0 auto;">
                <img :src="row.pd_goodsImgUrl" alt="" class="br4" style="width: 77px;height: 77px;">
                <div style="font-size: 13px;flex: 1;text-align: left;margin-left: 11px;">
                  <div class="line-1" style="margin-bottom: 9px;">
                    <a :href="'https://detail.tmall.com/item.htm?id='+row.pd_itemId" target="_blank">{{ row.pd_subTitle
                    }}</a>
                  </div>
                  <div style="margin-bottom: 9px;">商品ID：{{ row.pd_itemId }}</div>
                  <div><span>手机：{{ row.si_phone }}</span> <span>QQ/WX：{{ row.si_shopQq }}</span></div>
                </div>
              </div>
            </div>
            <div slot="pd_couponUrl" slot-scope="text, row">
              <div style="font-size: 13px;width:158px;margin: 0 auto;">
                <a :href="row.pd_couponUrl" target="_blank" rel="noopener noreferrer" style="display: inline-block">
                  <div class="coupon flex">
                    <span class="couponleft">券</span>
                    <span class="couponright">{{ row.pd_couponMoney }}</span>
                  </div>
                </a>
                <div>起：{{ row.pd_couponStartTime | dateFormat('YYYY-MM-DD') }}</div>
                <div>止：{{ row.pd_couponEndTime | dateFormat('YYYY-MM-DD') }}</div>
                <div>券后价：￥{{ row.pd_goodsCouponPrice }}</div>
              </div>
            </div>
            <div slot="pd_commissionRate" slot-scope="text, row">
              <div style="font-size: 13px;width: 158px;margin: 0 auto;text-align: left;">
                <div>券名称：{{ row.pd_couponName }}</div>
                <div>结算券后价：{{ row.pd_goodsCouponPrice }}</div>
                <div>服务费单价：{{ parseInt(row.pd_selmType) === 3 ? row.pd_serviceRate :
                  (Number(row.pd_goodsCouponPrice)*(Number(row.pd_serviceRate)/100)).toFixed(2) }}
                </div>
              </div>
            </div>
            <div slot="pd_mark" slot-scope="text, row">
              <div>{{ row.pd_mark }}</div>
            </div>
            <div slot="active" slot-scope="row">
              <a-button type="link" @click="gocollection(row)">收款</a-button>
            </div>
          </a-table>
          <a-table
            v-else
            :columns="columns2"
            :rowKey="activity2 => activity2.gf_id"
            :dataSource="activity2"
            :loading="loading2"
            @change="handleTableChange2"
            :pagination="pagination2"
          >
            <div slot="gf_id" slot-scope="text, row">
              <div style="margin: 0 auto;">
                <div>共 {{ row.gf_goodsData.length }} 个商品</div>
                <div class="line-4">
                  <div v-for="(v,k) in row.gf_goodsData" :key="k">
                    {{ v.goodsId }}
                  </div>
                </div>
              </div>
            </div>
            <div slot="allselmNum" slot-scope="text, row">
              <div> {{ row.allselmNum | numFormat }}</div>
            </div>
            <div slot="gf_actualPay" slot-scope="text, row">
              <div> {{ row.gf_actualPay | numFormat }}</div>
            </div>
            <div slot="gf_accountsPic" slot-scope="text, row">
              <el-image
                @click="doshow(row.gf_accountsPic)"
                style="width: 87px; height: 60px"
                :src="row.gf_accountsPic"
                :preview-src-list="srcList">
              </el-image>
            </div>
            <div slot="gf_errorImg" slot-scope="text, row">
              <el-image
                @click="doshow2(row.gf_errorImg)"
                style="width: 87px; height: 60px"
                :src="row.gf_errorImg[0]"
                :preview-src-list="srcList2">
              </el-image>
            </div>
            <div slot="gf_checkState" slot-scope="text, row">
              <div
                :style="{
                  color: Number(row.gf_checkState) === 0 ? '#040404':Number(row.gf_checkState) === 1 ? '#39C15B' : '#FF0303'
                }">{{ Number(row.gf_checkState) === 0 ? '未核对':Number(row.gf_checkState) === 1 ? '已核对' : "需重核" }}</div>
            </div>

            <div slot="active" slot-scope="row">
              <div>
                <a-button v-if="Number(row.gf_checkState) === 0" type="link" @click="godel(row)">删除</a-button>
              </div>
              <a-button type="link" @click="gocollection(row)">详情</a-button>
            </div>
          </a-table>
        </div>
      </a-card>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import { getsubmitgoodsdata, getuserunoaidgoods } from '@/api/collectionApi'
  import moment from 'moment'

  export default {
    name: 'OfflineCollection',
    data () {
      return {
        moment,
        status: 'a',
        search: '',
        columns: [
          {
            title: '提交时间',
            dataIndex: 'pd_addTime',
            align: 'center',
            scopedSlots: {
              customRender: 'pd_addTime'
            }
          },
          {
            title: '商品信息',
            dataIndex: 'pd_subTitle',
            align: 'center',
            scopedSlots: {
              customRender: 'pd_subTitle'
            }
          },
          {
            title: '优惠券',
            dataIndex: 'pd_couponUrl',
            align: 'center',
            scopedSlots: {
              customRender: 'pd_couponUrl'
            }
          },
          {
            title: '收款信息',
            dataIndex: 'pd_commissionRate',
            align: 'center',
            scopedSlots: {
              customRender: 'pd_commissionRate'
            }
          },
          {
            title: '备注',
            dataIndex: 'pd_mark',
            align: 'center',
            scopedSlots: {
              customRender: 'pd_mark'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        srcList: [],
        srcList2: [],
        columns2: [
          {
            title: '提交时间',
            dataIndex: 'gf_addTime',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_addTime'
            }
          },
          {
            title: '商品ID',
            dataIndex: 'gf_id',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_id'
            }
          },
          {
            title: '应收金额',
            dataIndex: 'allselmNum',
            align: 'center',
            scopedSlots: {
              customRender: 'allselmNum'
            }
          },
          {
            title: '实收金额',
            dataIndex: 'gf_actualPay',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_actualPay'
            }
          },
          {
            title: '收款账号',
            dataIndex: 'gf_actualUser',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_actualUser'
            }
          },
          {
            title: '转账截图',
            dataIndex: 'gf_accountsPic',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_accountsPic'
            }
          },
          {
            title: '异常截图',
            dataIndex: 'gf_errorImg',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_errorImg'
            }
          },
          {
            title: '备注',
            dataIndex: 'gf_mark',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_mark'
            }
          },
          {
            title: '财务备注',
            dataIndex: 'gf_checkMark',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_checkMark'
            }
          },
          {
            title: '状态',
            dataIndex: 'gf_checkState',
            align: 'center',
            scopedSlots: {
              customRender: 'gf_checkState'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   pd_activityType: 2,
          //   pd_addTime: '2020-11-19 17:40:20',
          //   pd_cateText: '内衣',
          //   pd_circleText: '测试😀',
          //   pd_commissionRate: '0',
          //   pd_couponActivityId: '',
          //   pd_couponEndTime: '2020-11-24 23:59:59',
          //   pd_couponMoney: '10.00',
          //   pd_couponName: '测试2',
          //   pd_couponNum: 100000,
          //   pd_couponSingle: '1.00',
          //   pd_couponStartTime: '2020-11-18 00:00:00',
          //   pd_couponSurplus: 38000,
          //   pd_couponUrl: 'https://uland.taobao.com/quan/detail?sellerId=1809584306&activityId=440ff73e0d344c1b818956af184bf83e',
          //   pd_detailArr: { 'sellCount': '3.5万+', 'categoryId': '50012772', 'shopType': 'B', 'shopId': '106749678', 'userId': '1809584306', 'shopName': 'leidya旗舰店', 'shopIcon': '//img.alicdn.com/imgextra//55/8e/TB1AA0.cnZKL1JjSZFISut_DFXa.jpg', 'sellerNick': 'leidya旗舰店', 'title': '情侣款冬季加绒加厚法兰绒睡衣女保暖可爱珊瑚绒加大码睡衣套装女', 'rootCategoryId': '1625' },
          //   pd_dtkId: null,
          //   pd_dtkState: 9,
          //   pd_dtkText: null,
          //   pd_dtkUserId: null,
          //   pd_dtk_reason: null,
          //   pd_error_status: 0,
          //   pd_error_user: 0,
          //   pd_finaState: 0,
          //   pd_goodsCouponPrice: '39.80',
          //   pd_goodsImgUrl: '//img.alicdn.com/imgextra/i4/1809584306/O1CN01VzncvJ1hgC53gieCk_!!0-item_pic.jpg',
          //   pd_goodsPrice: '49.80',
          //   pd_hdkId: null,
          //   pd_hdkState: 9,
          //   pd_hdkText: null,
          //   pd_id: 231845,
          //   pd_issue_num: 0,
          //   pd_issue_service_fee: '0.00',
          //   pd_itemId: '627327684651',
          //   pd_manaUser: '跑单六',
          //   pd_mana_at: 0,
          //   pd_mana_mark: null,
          //   pd_mark: '54545',
          //   pd_pure_url: '测试',
          //   pd_realUrl: null,
          //   pd_sellCount: null,
          //   pd_selmType: 1,
          //   pd_serviceRate: '1',
          //   pd_shoudan: 0,
          //   pd_shzId: null,
          //   pd_shzState: 9,
          //   pd_shzText: null,
          //   pd_subTitle: '测试2',
          //   pd_superUrl: 'http://sr.gzsqcw.cn/2020/11/1abb2d2020111917394944515.jpg',
          //   pd_userId: 197,
          //   pd_videoUrl: null,
          //   pd_withdraw: 1,
          //   pd_writing: 'https://uland.taobao.com/quan/detail?sellerId=1809584306&activityId=440ff73e0d344c1b818956af184bf83e',
          //   si_addTime: '2020-11-19 17:40:20',
          //   si_contactQq: 45454,
          //   si_id: 192861,
          //   si_paodanId: 231845,
          //   si_phone: 4545,
          //   si_sellerId: '106749678',
          //   si_shopName: 'leidya旗舰店',
          //   si_shopQq: 56454
          // }
        ],
        activity2: [],
        loading: false,
        loading2: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        pagination2: {
          pageSize: 15,
          page: 1
        }
      }
    },

    computed: {},
    created () {
      // if (this.$route.path === '/reimbursement/offlineCollection') {
      this.getuserunoaidgoods(1, 15)
      // }
    },
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    mounted () {
    },
    methods: {
      godel (row) {
        console.log(row)
      },
      doshow (val) {
        this.srcList.push(val)
      },
      doshow2 (val) {
        this.srcList2 = val
      },
      gocollection (row) {
        this.$store.dispatch('setIssuename', row)
        this.$router.push({
          path: '/reimbursement/offlineCollection/collection'
        })
      },
      getuserunoaidgoods (page, pagesize, search) {
        this.loading = true
        getuserunoaidgoods({
          page: page,
          pagesize: pagesize,
          search: search
        })
          .then(res => {
            console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      getsubmitgoodsdata (page, pagesize, search) {
        this.loading2 = true
        getsubmitgoodsdata({
          page: page,
          pagesize: pagesize,
          status: this.status,
          search: search
        })
          .then(res => {
            // console.log(res)
            const arr = res.data.data
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].gf_goodsData !== null) {
                arr[i].gf_goodsData = JSON.parse(arr[i].gf_goodsData)
                var allselmNum = 0
                if (arr[i].gf_goodsData.length > 0) {
                  for (let j = 0; j < arr[i].gf_goodsData.length; j++) {
                    allselmNum += Number(arr[i].gf_goodsData[j].selmNum)
                  }
                }
              }
              arr[i].allselmNum = allselmNum

              if (arr[i].gf_errorImg !== null) {
                arr[i].gf_errorImg = JSON.parse(arr[i].gf_errorImg)
                if (arr[i].gf_errorImg.length > 0) {
                  var arr1 = []
                  for (let k = 0; k < arr[i].gf_errorImg.length; k++) {
                    if (arr[i].gf_errorImg[k].goodsId.indexOf('img.letuilm.com') !== -1) {
                      arr1.push(arr[i].gf_errorImg[k].goodsId.replace(/img.letuilm.com/g, `//img.letuilm.com`))
                    }
                    if (arr[i].gf_errorImg[k].goodsId.indexOf('public/static') !== -1) {
                      arr1.push(arr[i].gf_errorImg[k].goodsId.replace(
                        /\/public\/static/g,
                        `//zsxt.letuilm.com/public/static`
                      ))
                    }
                  }
                  arr[i].gf_errorImg = arr1
                }
              }

              if (arr[i].gf_accountsPic.indexOf('img.letuilm.com') !== -1) {
                arr[i].gf_accountsPic = arr[i].gf_accountsPic.replace(/img.letuilm.com/g, `//img.letuilm.com`)
              }
              if (arr[i].gf_accountsPic.indexOf('public/static') !== -1) {
                arr[i].gf_accountsPic = arr[i].gf_accountsPic.replace(
                  /\/public\/static/g,
                  `//zsxt.letuilm.com/public/static`
                )
              }
            }
            console.log(arr)
            this.activity2 = arr
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination2 = pagination
            this.loading2 = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getuserunoaidgoods(params.page, 15, this.search)
      },
      handleTableChange2 (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination2
        }
        pager.current = pagination.current
        this.pagination2 = pager
        this.fetch2({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch2 (params = {}) {
        // console.log('params:', params)
        this.getsubmitgoodsdata(params.page, 15, this.search)
      },
      onSearch (value) {
        // console.log(value)
        if (this.status === 'a') {
          this.getuserunoaidgoods(1, 15, this.search)
        } else {
          this.getsubmitgoodsdata(1, 15, this.search)
        }
      },
      statusChange (e) {
        console.log('radio checked', e.target.value)
        if (this.status === 'a') {
          this.getuserunoaidgoods(1, 15, this.search)
        } else {
          this.getsubmitgoodsdata(1, 15, this.search)
        }
      },
      /*
      * 获取传入对象数组里的某个属性和传入的属性的值等于传入的值
      * 数组对象 对象的的某个属性 属性应该对应的值
      * return list 返回数组对象的符合条件的一项
      * */
      getobjnature (list, key, nature) {
        for (const i in list) {
          if (list[i][key] === nature) {
            return list[i]
          }
        }
        return null
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .offlineCollection {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 19px;
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    .a_blue {
      color: #00A0E9;
      cursor: pointer;
    }

    .coupon {
      /*border: 1px solid rgb(255, 85, 64);*/
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      overflow: hidden;
      width: 96px;
      /*margin: 0 auto;*/

      .couponleft {
        width: 48px;
        height: 24px;
        line-height: 24px;
        background-color: rgb(255, 85, 64);
        color: #ffffff;
      }

      .couponright {
        width: 48px;
        height: 24px;
        line-height: 21px;
        background-color: #ffffff;
        color: rgb(255, 85, 64);
        border: 1px solid #ff5540;
        border-radius: 0 4px 4px 0;
      }

    }
  }
</style>
